import React, { useState } from 'react';
import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { Button, Form, Input, message, Select, Space, Switch } from 'antd';
import { ClearOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons'
// 引入nanoid库
import {nanoid} from 'nanoid'
import {addArticleNew} from '@/api/modules/articleApi'
import MyEditor from './MyEditor';

const { Option } = Select;
const { TextArea } = Input;
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const ArticleAdd: React.FC = () => {
  const navigate = useNavigate()
  const [form] = Form.useForm();
  // 从RTK中获取文章内容
  const { articleContentData } = useSelector(state=>state.articleSlice)
  // 获取当前用户
  const {username} = useSelector(state=>state.userSlice)
  const [isPublish,setIsPublish] = useState(false)
  // 执行添加操作
  const onFinish = async (values: any) => {
    let newsData = {
      ...values,
      status:isPublish,
      id:nanoid(),  // nanoid 创建唯一的id值
      author:username,
      createTime:Date.now(),
      content:articleContentData
    }
    console.log(newsData,'newsData')
    // 获取接口存储数据
    let res = await addArticleNew(newsData)
    console.log(res,'res')
    message.success('添加成功');
    navigate('/sys/article/list')
  };



  return (
    <div>
      <Button icon={<LeftOutlined />} type='primary' onClick={()=>navigate(-1)}>返回</Button>
      <Form
        {...layout}
        form={form}
        name="control-hooks"
        onFinish={onFinish}
        // style={{ maxWidth: 600 }}
      >
        <Form.Item name="title" label="文章标题" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
        
        {/* <Form.Item name="createTime" label="发布日期" rules={[{ required: true }]}>
            <DatePicker />
        </Form.Item> */}
          
        <Form.Item name="region" label="板块" rules={[{ required: true }]}>
          <Select>
            <Option value="全球">全球</Option>
            <Option value="亚洲">亚洲</Option>
            <Option value="国际">国际</Option>
            <Option value="国内">国内</Option>
            <Option value="军事">军事</Option>
            <Option value="财经">财经</Option>
          </Select>
        </Form.Item>
        <Form.Item name="content" label="新闻内容">
          {/* <TextArea rows={4}/> */}
          <MyEditor/>
        </Form.Item>
        <Form.Item name="status" label="是否发布">
          <Switch checkedChildren="发布" unCheckedChildren="未发布" defaultChecked={isPublish} onChange={(value)=>{
            setIsPublish(value)
          }}/>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Space>
            <Button icon={<PlusOutlined />} type="primary" htmlType="submit">
              新增
            </Button>
            <Button type="primary" danger icon={<ClearOutlined />} htmlType="button" onClick={()=>form.resetFields()}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

export default ArticleAdd;